<!DOCTYPE html>
<html>

<head>

    {include file="Public/header"}
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
</head>

<body style="color:#333;padding:3px;">
<!-- 标题 -->
<div class="page-heade">
    <h2 class="title_color text-center"></h2>
</div>
<!-- 标题 -->
<div class="form-inline">

        <table class="row-margin-top tab-content table-bordered table text-center" border="1">
            <tr>
                <td class="text-left" colspan="5" rowspan="">
                    <button
                       class="btn btn-primary" id="add">添加样品/物料</button>
                </td>
            </tr>
        </table>

    <table class="table row-margin-top table-bordered text-center bud_hei" id="table1">
        <thead>
        <tr class="info text-center">
            <th class="text-center">样品/物料</th>
            <th class="text-center">数量</th>
            <th class="text-center">单位</th>
            <th class="text-center">单价(元)</th>
            <th class="text-center">金额(元)</th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
            <tr>
                <td colspan="4" class="text-right">合计：</td>
                <td><span id="heji"></span></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
    <div>
        {:isset($page)?$page:''}
    </div>
</div>
<!-- 全局js -->
{include file="Public/footer"}
<script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<!-- <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> -->
<script src="__STATIC__/layout/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script>
    $(function () {
        //删除一行
        $('body').on('click','.delete',function () {
            $(this).closest('tr').remove()
            return false
        });

        //添加一行
        $('#add').on('click', function () {
            var rd =  Math.random()
            var name = 'wy'+rd
            $('#table1').append('<tr>\n' +
                '            <td style="width:40%;">\n' +
                '               <div class="col-xs-5">' +
                '                <label for=""><input type="radio" name="'+name+'" class="wy" value="0" checked>样品</label>\n' +
                '                <label for=""><input type="radio" name="'+name+'" class="wy" value="1">物料</label>' +
                '               </div>\n' +
                    '        <div class="col-xs-7">'+
                '                <div class="input-group show1" >\n' +
                '                    <input name="stuff" type="text" placeholder="请输入关键字或空格查询"\n' +
                '                           class="input12 form-control sample" value="">\n' +
                '                    <div class="input-group-btn">\n' +
                '                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">\n' +
                '                            <span class="caret"></span>\n' +
                '                        </button>\n' +
                '                        <ul class="dropdown-menu dropdown-menu-right" role="menu">\n' +
                '                        </ul>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '                <div class="input-group show2 col-xs-2" style="display: none;">\n' +
                '                    <input name="stuff"  type="text" placeholder="请输入关键字或空格查询"\n' +
                '                           class="input12 form-control material" value="">\n' +
                '                    <div class="input-group-btn">\n' +
                '                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">\n' +
                '                            <span class="caret"></span>\n' +
                '                        </button>\n' +
                '                        <ul class="dropdown-menu dropdown-menu-right" role="menu">\n' +
                '                        </ul>\n' +
                '                    </div>\n' +
                '                </div>' +
                '                <div class="selectedOnlyOne" style="display: none;">\n' +
                '                    <input type="hidden" name="product" value="">\n' +
                '                    <span class="inin">水棕</span>\n' +
                '                    <span class="close">×</span>\n' +
                '                </div>\n' +
                '           </div>\n' +

                '            </td>\n' +
                '            <td>\n' +
                '                <input type="text" name="num">\n' +
                '            </td>\n' +
                '            <td>\n' +
                '                <span class="unit"></span>\n' +
                '            </td>\n' +
                '            <td>\n' +
                '                <span class="price"></span>\n' +
                '            </td>\n' +
                '            <td>\n' +
                '                <span class="total">0</span>\n' +
                '            </td>\n' +
                '            <td>\n' +
                '                <button class="delete">删除</button>\n' +
                '            </td>\n' +
                '        </tr>');
            //样品搜索补全
            $(".sample").bsSuggest({
                url: "{:url('select/samplejson')}",
                effectiveFieldsAlias: {title: "名称"},
                ignorecase: true,
                showHeader: true,
                showBtn: false,     //不显示下拉按钮
                delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
                idField: "id",
                keyField: "title",
                clearable: true
            }).on('onSetSelectValue', function (e, keyword, data) {
                $(this).closest('.input-group').hide()
                $(this).val('')
                $(this).closest('td').find('.inin').html(keyword.key)
                $(this).closest('td').find('[name=product]').val(keyword.id)
                $(this).closest('td').find('.selectedOnlyOne').show()

            })

            //物料搜索补全
            $(".material").bsSuggest({
                url: "{:url('select/materialjson')}",
                effectiveFieldsAlias: {title: "名称"},
                ignorecase: true,
                showHeader: true,
                showBtn: false,     //不显示下拉按钮
                delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
                idField: "id",
                keyField: "title",
                clearable: true
            }).on('onDataRequestSuccess', function (e, result) {
                $(this).closest('tr').data('rs',JSON.stringify(result.value))
                console.log('onDataRequestSuccess: ', result);
            }).on('onSetSelectValue', function (e, keyword, data) {
                $(this).closest('.input-group').hide()
                $(this).val('')
                $(this).closest('td').find('.inin').html(keyword.key)
                $(this).closest('td').find('[name=product]').val(keyword.id)
                $(this).closest('td').find('.selectedOnlyOne').show()

                var rs = $(this).closest('tr').data('rs')
                rs = JSON.parse(rs)
                for(var i=0;i<rs.length;i++){
                    if(rs[i].id==keyword.id){
                        $(this).closest('tr').find('.unit').html(rs[i].unit)
                        $(this).closest('tr').find('.price').html(rs[i].factory)
                    }
                }
                
            })

        })
    })
</script>
<script>
    $(function () {
        //点击物料样品单选
        $('body').on('click','.wy',function () {

                $(this).closest('td').find('.inin').html('')
                $(this).closest('td').find('[name=product]').val('')
                $(this).closest('td').find('.selectedOnlyOne').hide()
                if($(this).val()==0){
                    $(this).closest('td').find('.show1').show()
                    $(this).closest('td').find('.show2').hide()
                }else{
                    $(this).closest('td').find('.show2').show()
                    $(this).closest('td').find('.show1').hide()
                }


        })
        //关闭选择
        $('body').on('click','.selectedOnlyOne .close',function () {
            if($(this).closest('td').find('.wy:checked').val()==0){
                $('.show1').show()
                $('.show2').hide()
            }else{
                $('.show2').show()
                $('.show1').hide()
            }
            $(this).closest('.selectedOnlyOne').hide().find('.inin').html('')
            $(this).closest('.selectedOnlyOne').hide().find('.inin').html('')
            $(this).closest('td').find('[name=product]').val('')
            $(this).closest('tr').find('[name=num]').val('')
            $(this).closest('tr').find('.total').text('0.00')

        })

        //计算金额
        $('body').on('input','input[name=num]',function () {
            var num = $(this).val()
            var price = $(this).closest('tr').find('.price').text()
            $(this).closest('tr').find('.total').text(price*num)

            //计算合计
            var heji = 0
            $(this).closest('tbody').find('.total').each(function (i,o) {
                var total = $(o).text();
                total = parseFloat(total)
                heji += total
            })
            $('#heji').html(heji)
        })


    })
</script>
</body>
</html>
